<template>
  <!--出入管理-->
  <div class="flex flex-column ">
    <div class="hm-select-area align-center bg-white font-14">
      <span style="margin-left: 20px;">停车场</span>
     <el-select v-model="searchObj.parking_lot_id" placeholder="请选择" class="hm-select"  clearable >
        <el-option
          v-for="item in options"
          :key="item.parking_lot_id"
          :label="item.parking_lot_name"
          :value="item.parking_lot_id">
        </el-option>
      </el-select>
      <span>时间</span>
      <el-date-picker
        class="hm-date"
        v-model="dateRangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <span style="margin-left: 20px;">预约状态</span>
      <el-select v-model="searchObj.order_status" placeholder="请选择" class="hm-select"  clearable>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-button type="primary" @click="getUserList">搜索</el-button>
    </div>
    <div class="home-table-area bg-white flex-sub">
        <el-row class="float-right"  style="z-index:999">
          <div class="flex">
            <el-input class="hta-input" placeholder="搜索姓名等关键字" v-model="searchObj.keywords">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="getUserList">搜索</el-button>
          </div>
        </el-row>
        <el-tabs v-model="activeName" >
          <el-tab-pane label="预约订单" name="first">
            <el-table class="home-table" :data="tableData" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
              <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope">
                  <div>{{(searchObj.page - 1) * searchObj.page_num + scope.$index + 1}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="car_number" label="车牌号" header-align="center" align="center"></el-table-column>
              <el-table-column prop="true_name" label="车主" header-align="center" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
              <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center"></el-table-column>
              <el-table-column prop="parking_place_number" label="车位" header-align="center" align="center"></el-table-column>
              <el-table-column  label="预约状态" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.order_status === 'APPOINT' ? '已预约' : scope.row.order_status === 'ADMISSION' ? '已入场' : scope.row.order_status === 'CANCEL' ? '已取消':scope.row.order_status === 'COMPLETE' ? '已完成':scope.row.order_status === 'OVERTIME' ? '已超时':'无' }}
                </template>
              </el-table-column>
              <el-table-column label="预约时间" header-align="center" align="center" width="170">
                <template slot-scope="scope">
                  {{ dateFormat(scope.row.appoint_time) }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination 
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="total" @current-change="sizeChange">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="临停订单" name="second">
            <el-table class="home-table" :data="tableDatas" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
              <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope">
                  <div>{{(searchObj.page - 1) * searchObj.page_num + scope.$index + 1}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="car_number" label="车牌号" header-align="center" align="center"></el-table-column>
              <el-table-column prop="true_name" label="车主" header-align="center" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
              <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center"></el-table-column>
              <el-table-column prop="parking_place_number" label="车位" header-align="center" align="center"></el-table-column>
              <el-table-column  label="停车状态" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.order_status === 'APPOINT' ? '已预约' : scope.row.order_status === 'ADMISSION' ? '已入场' : scope.row.order_status === 'CANCEL' ? '已取消':scope.row.order_status === 'COMPLETE' ? '已完成':scope.row.order_status === 'OVERTIME' ? '已超时':'无' }}
                </template>
              </el-table-column>
              <el-table-column label="停车时间" header-align="center" align="center" width="170">
                <template slot-scope="scope">
                  {{ dateFormat(scope.row.appoint_time) }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination 
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="totals" @current-change="sizeChange">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>   
    
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      dateRangeTime: [],
      activeName:'first',
      searchObj: {
        parking_lot_id:'',
        order_type: 'APPOINT',
        order_status:'',
        begin_time: '',
        end_time: '',
        // keywords: '',
        page: 1,
        page_num: 10
      },
      typeOptions: [
        {
          label: '已预约',
          value: 'APPOINT'
        },
        {
          label: '已入场',
          value: 'ADMISSION'
        },
        {
          label: '已取消',
          value: 'CANCEL'
        },
        {
          label: '已完成',
          value: 'COMPLETE'
        },
        {
          label: '已超时',
          value: 'OVERTIME'
        }
      ],
      addForm:{
        car_type:'blue',
        car_number:'',
        car_name:'',
        contact_phone:'',
        carnumber:''
      },
      total: 10,
      tableData: [],
      totals: 10,
      tableDatas: [],
      admin_id: '',
      value: '',
      options: []
    }
  },
  mounted () {
    this.admin_id = this.$store.state.adminId
    this.getparkingLotListByLoginId()
    this.getOutData()
  },
  methods: {
    // 登录者管理的停车场列表
    getparkingLotListByLoginId(){
      this.$api.parkingLotListByLoginId({admin_id:this.admin_id}).then(res=>{
        this.options = res
      })
    },
    searchType (val) {
      this.getUserList()
    },
    searchTime (val) {
      this.getUserList()
    },
  
    getUserList () {
      this.searchObj.page = 1
      this.getOutData()
    },
    // 获取出入记录列表
    getOutData () {
      this.searchObj.admin_id = this.admin_id
       if(this.dateRangeTime === null||this.dateRangeTime === []){
         this.searchObj.begin_time = ''
         this.searchObj.end_time = ''
      }else{
        this.searchObj.begin_time = (new Date(this.dateRangeTime[0])).getTime() / 1000 ||''
        this.searchObj.end_time = (new Date(this.dateRangeTime[1])).getTime() / 1000 ||''
      }  
      this.searchObj.order_type = 'APPOINT'
      console.log(this.searchObj.order_type)
      this.$api.allOrderList(this.searchObj).then(res => {
        this.tableData = res.data
        this.total = res.page_info.total
        this.searchObj.order_type = 'TEMP'
        this.$api.allOrderList(this.searchObj).then(res => {
          this.tableDatas = res.data
          this.totals = res.page_info.total
        })
      })

    },
    sizeChange (val) {
      this.searchObj.page = val
      this.getOutData()
    },
    dateFormat (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
      date = new Date(date * 1000)
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
  }
}
</script>

<style scoped>
  .flex >>>.el-tabs__nav-wrap::after,.flex >>>.el-tabs__active-bar.is-top{
    width: 0%!important;
  }
  .flex >>>.el-tabs__item.is-top.is-active{
      font-size:18px;
  }
  .hta-input {
    width: 260px;
    margin-right: 23px;
  }
  .hm-date{
    margin: 0 15px;
  }
</style>
